<script>
import HeaderCom from "@/components/headerCom.vue";
import FooterCom from "@/components/footerCom.vue";

export default {
  name: "indexPage",
  components: {FooterCom, HeaderCom},
  data() {
    return {
      msg: '这是index',
      flag: true,
      com: 'header-com'
    }
  },
  methods:{
    addNew(){
      // 可以获取到定义在子组件上的数据和方法
      this.$refs['header-com'].add()
    }
  },
  // created() {
  //   console.log(document.getElementById('box'),'box')
  // },
  mounted(){
    // console.log(document.getElementById('box'),'box')
    // 获取dom元素
    console.log(this.$refs)
    console.log(this.$refs.box123)
    console.log(this.$refs['header-com'])
  }
}
</script>

<template>
  <div>
    <!-- 把子组件名作为标签去使用 -->
<!--        <header-com></header-com>-->
    <!--    <header-com></header-com>-->
    <!--    <header-com></header-com>-->
    indexPage
    {{ msg|setMsg('index') }}
    <router-link to="/about">去about页面</router-link>
    <!--  切换子组件  -->
    <button @click="flag=!flag">切换组件</button>
    <!--    <header-com v-if="flag"></header-com>-->
    <!--    <footer-com v-else></footer-com>-->
    <!--  组件也可以用动画切换  -->
    <!--    mode="out-in"只能用在组件动画中  -->
    <transition name="custom-classes-transition"
                enter-active-class="animate__animated animate__fadeInUpBig"
                leave-active-class="animate__animated animate__zoomOutUp"
                mode="out-in"
    >
      <header-com v-if="flag"></header-com>
      <footer-com v-else></footer-com>
    </transition>
    <!--    使用:is属性-->
    <button @click="addNew">num++</button>
    <component :is="com" ref="header-com"></component>
<!--    <component :is="com" ref="headerCom"></component>-->
<!--    <div id="box">box</div>-->
    <div ref="box123">box</div>
    <div ref="dom">元素</div>
  </div>
</template>

<style scoped lang="less">
.v-enter {
  transform: translateX(-300px);
}

.v-enter-to {
  transform: translateX(0);
}

.v-enter-active {
  transition: transform 3s;
}

.v-leave {
  transform: translateX(0px) rotate(0deg);
}

.v-leave-to {
  transform: translateX(300px) rotate(360deg);
}

.v-leave-active {
  transition: transform 4s;
}
</style>